<template>
	<div ref="outerDom" class="big-container">
		<div class="news-area">
			<div class="container-content">
				<div class="one-new">
					<div @click="toDetail(oneData.baseId,'检察要闻','','/newsList','1817829252155662336',1)"
						class="one-title">{{oneData.title}}</div>
					<div class="between-layout">
						<div class="one-desc one_line" v-html="oneData.contentNon"></div>
						<div style="z-index: 999999;" @click="toDetail(oneData.baseId,'检察要闻','','/newsList','1817829252155662336',1)"
							class="one-more">详细<i class="el-icon-d-arrow-right"></i></div>
					</div>
				</div>
				<el-row style="padding: 30px 0;" :gutter="20">
					<el-col :span="14">
						<el-carousel height="486px">
							<el-carousel-item
								:name="item.title" v-for="item in dataList8" :key="item.baseId">
								<div @click="toDetail(item.baseId,'检察要闻','','/newsList','1817829252155662336',1)" style="position: relative;">
									<img style="width: 100%;height:486px;object-fit: cover;" :src="item.coverImageUrl" />
									<div class="img-top one_line">{{item.title}}</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</el-col>
					<el-col :span="10">
						<div class="news-title between-layout">
							<div class="news-name">检察要闻</div>
							<router-link style="outline:none;"
								:to="{path:'/newsList',query:{id:'1817829252155662336'}}">
								<div class="news-more">更多<i class="el-icon-d-arrow-right"></i></div>
							</router-link>
						</div>
						<div @click="toDetail(item.baseId,'检察要闻','','/newsList','1817829252155662336',1)"
							v-for="(item,index) in dataList1" :key="index" class="between-layout news-item">
							<div style="flex: 1;width: 0;" class="start-layout">
								<div class="item-dot"></div>
								<div class="item-name one_line">{{item.title}}</div>
							</div>
							<div class="item-date">{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<div style="padding: 30px 0;" class="container-content">
			<el-carousel style="margin-bottom: 30px;" v-if="showBanner" indicator-position="none" height="148px"
				direction="vertical" autoplay>
				<el-carousel-item v-if="item.coverImageUrl" v-for="item in dataList9" :key="item">
					<img @click="toDetail(item.baseId,'检察要闻','专题专栏','/newsList','1817829252155662336')"
						style="width: 100%;height: 148px;" :src="item.coverImageUrl" />
				</el-carousel-item>
			</el-carousel>
			<div class="service-hall center-layout">
				<div class="hall-item">
					<img class="wy-img" src="@/assets/image/wyk.png">
					<div @click="toLink(item.url)" class="wy-item" v-for="(item,index) in unitList1" :key="index">
						{{item.name}}
					</div>
				</div>
				<div class="hall-item">
					<img class="wy-img" src="@/assets/image/wyc.png">
					<div @click="toLink(item.url)" class="wy-item" v-for="(item,index) in unitList2" :key="index">
						{{item.name}}
					</div>
				</div>
				<div class="hall-item">
					<img class="wy-img" src="@/assets/image/wyb.png">
					<div @click="toLink(item.url)" class="wy-item" v-for="(item,index) in unitList3" :key="index">
						{{item.name}}
					</div>
				</div>
			</div>
			<el-row :gutter="30">
				<el-col :span="12">
					<div class="com-title between-layout">
						<div class="bot-line"></div>
						<div class="com-name">检察业务</div>
						<router-link style="outline:none;" :to="{path:'/business',query:{id:'1817842224282300416'}}">
							<div class="com-more">更多<i class="el-icon-d-arrow-right"></i></div>
						</router-link>
					</div>
					<div style="min-height: 350px;">
						<el-empty v-if="dataList2&&dataList2.length==0" description="暂无数据"></el-empty>
						<div @click="toDetail(item.baseId,'检察业务','','/business','1817842224282300416')"
							v-for="(item,index) in dataList2" :key="index" class="between-layout com-item">
							<div style="flex: 1;width: 0;" class="start-layout">
								<div class="item-dot"></div>
								<div class="item-name one_line">{{item.title}}</div>
							</div>
							<div class="item-date">{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}</div>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="com-title between-layout">
						<div class="bot-line"></div>
						<div class="com-name">理论研究</div>
						<router-link style="outline:none;"
							:to="{path:'/theoryResearch',query:{id:'1817842526263799808'}}">
							<div class="com-more">更多<i class="el-icon-d-arrow-right"></i></div>
						</router-link>
					</div>
					<div style="min-height: 350px;">
						<el-empty v-if="dataList3&&dataList3.length==0" description="暂无数据"></el-empty>
						<div @click="toDetail(item.baseId,'检察业务','','/business','1817842224282300416')"
							v-for="(item,index) in dataList3" :key="index" class="between-layout com-item">
							<div style="flex: 1;width: 0;" class="start-layout">
								<div class="item-dot"></div>
								<div class="item-name one_line">{{item.title}}</div>
							</div>
							<div class="item-date">{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<div class="grid-area between-layout">
				<div class="grid-title center-layout">
					专&nbsp;&nbsp;题<br>中&nbsp;&nbsp;心
				</div>
				<router-link style="outline:none;width: 100%;"
					:to="{path:'/agencySet',query:{id:'1817830386937192448',twoId:'1817835094997295104',name:'内设机构'}}">
					<img class="grid-img" src="@/assets/image/index_17.jpg" />
				</router-link>
				<router-link style="outline:none;width: 100%;"
					:to="{path:'/affairsOpen',query:{id:'1817835226660691968',twoId:'1817841557031448576',name:'工作报告'}}">
					<img class="grid-img" src="@/assets/image/index_20.jpg" />
				</router-link>
				<router-link style="outline:none;width: 100%;"
					:to="{path:'/affairsOpen',query:{id:'1817835226660691968',twoId:'1817835273536233472',name:'工作流程'}}">
					<img class="grid-img" src="@/assets/image/index_22.jpg" />
				</router-link>
				<router-link style="outline:none;width: 100%;"
					:to="{path:'/affairsOpen',query:{id:'1817835226660691968',twoId:'1817841648014290944',name:'预决算公开'}}">
					<img class="grid-img" src="@/assets/image/index_24.jpg" />
				</router-link>
			</div>
			<el-row :gutter="30">
				<el-col :span="12">
					<div class="com-title between-layout">
						<div class="bot-line"></div>
						<div class="com-name">基层建设</div>
						<router-link style="outline:none;"
							:to="{path:'/newsList',query:{id:'1817829252155662336',twoId:'1817842639132520448',name:'基层建设'}}">
							<div class="com-more">更多<i class="el-icon-d-arrow-right"></i></div>
						</router-link>
					</div>
					<div style="min-height: 350px;">
						<el-empty v-if="dataList4&&dataList4.length==0" description="暂无数据"></el-empty>
						<div @click="toDetail(item.baseId,'检察要闻','基层建设','/newsList','1817829252155662336')"
							v-for="(item,index) in dataList4" :key="index" class="between-layout com-item">
							<div style="flex: 1;width: 0;" class="start-layout">
								<div class="item-dot"></div>
								<div class="item-name one_line">{{item.title}}</div>
							</div>
							<div class="item-date">{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}</div>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="com-title between-layout">
						<div class="bot-line"></div>
						<div class="com-name">检察文化</div>
						<router-link style="outline:none;"
							:to="{path:'/baseBuilding',query:{id:'1817842684183539712'}}">
							<div class="com-more">更多<i class="el-icon-d-arrow-right"></i></div>
						</router-link>
					</div>
					<div style="min-height: 350px;">
						<el-empty v-if="dataList5&&dataList5.length==0" description="暂无数据"></el-empty>
						<div @click="toDetail(item.baseId,'检察文化','','/baseBuilding','1817842684183539712')"
							v-for="(item,index) in dataList5" :key="index" class="between-layout com-item">
							<div style="flex: 1;width: 0;" class="start-layout">
								<div class="item-dot"></div>
								<div class="item-name one_line">{{item.title}}</div>
							</div>
							<div class="item-date">{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<div class="com-title between-layout">
				<div class="bot-line"></div>
				<div class="com-name">领导班子</div>
				<router-link style="outline:none;"
					:to="{path:'/agencySet',query:{id:'1817830386937192448',twoId:'1817834651952963584',name:'院领导'}}">
					<div class="com-more">更多<i class="el-icon-d-arrow-right"></i></div>
				</router-link>
			</div>
			<div style="padding: 26px;background-color: #F0F8FF;border-radius: 10px;margin-top: 20px;"
				class="start-layout">
				<div style="color: #174B8C;font-size: 24px;font-weight: bold;">
					市<br />
					院<br />
					领<br />
					导
				</div>
				<div @click="toDetail(item.baseId,'检务公开','院领导','/affairsOpen','1817834651952963584',2)"
					v-for="(item,index) in dataList6" :key="index" class="start-layout"
					style="width: 23%;cursor: pointer;">
					<img style="width: 100px;height: 140px;margin-left: 20px;object-fit: cover;" :src="item.avatarUrl" />
					<div style="margin-left: 15px;text-align: center;">
						<div style="color: #174B8C;font-size: 20px;font-weight: bold;">{{item.name}}</div>
						<div class="posi-area" style="font-size: 16px;color: #333333;margin-top: 10px;">{{item.position}}</div>
					</div>
				</div>
			</div>
			<div class="com-title between-layout">
				<div class="bot-line"></div>
				<div class="com-name">检苑风采</div>
				<router-link style="outline:none;"
					:to="{path:'/baseBuilding',query:{id:'1817842684183539712',twoId:'1817842779088056320',name:'摄影欣赏'}}">
					<div class="com-more">更多<i class="el-icon-d-arrow-right"></i></div>
				</router-link>
			</div>
			<div style="min-height: 250px;">
				<el-empty v-if="dataList7&&dataList7.length==0" description="暂无数据"></el-empty>
				<div style="margin-top: 20px;" class="swiper-container">
					<div class="swiper-wrapper">
						<div @click="toDetail(item.baseId,'检察文化','摄影欣赏','/baseBuilding','1817842779088056320')"
							v-for="item in dataList7" :key="item.baseId" class="swiper-slide">
							<img class="swiper-img" :src="item.coverImageUrl" />
						</div>
					</div>
					<div class="swiper-button-next"></div>
					<div class="swiper-button-prev"></div>
				</div>
			</div>
		</div>
		<div class="fixed-right">
			<div class="item-fixed hover1">
				<div class="hover-box">
					<img class="item-img" src="@/assets/image/weibo.png" />
					<div class="item-name">官方微博</div>
				</div>
				<div class="pop-box">
					<img class="wx-bg" src="@/assets/image/weibo-code.png" />
					<div class="triangle-right"></div>
				</div>
			</div>
			<div class="item-fixed hover2">
				<div class="hover-box">
					<img class="item-img" src="@/assets/image/weixin.png" />
					<div class="item-name">官方微信</div>
				</div>
				<div class="pop-box">
					<img class="wx-bg" src="@/assets/image/weixin-code.png" />
					<div class="triangle-right"></div>
				</div>
			</div>
			<div class="item-fixed hover3">
				<div class="hover-box">
					<img class="item-img" src="@/assets/image/toutiao.png" />
					<div class="item-name">今日头条</div>
				</div>
				<div class="pop-box">
					<img class="wx-bg" src="@/assets/image/toutiao-code.png" />
					<div class="triangle-right"></div>
				</div>
			</div>
			<div v-show="isShow" @click="goBack" class="item-fixed">
				<img class="item-img" src="@/assets/image/top.png" />
				<div class="item-name">回到顶部</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Swiper from 'swiper'; // 注意引入的是Swiper
	import 'swiper/css/swiper.min.css' // 注意这里的引入
	import {
		getFrontList,
		getNewsList,
		getCarousel,
		getMemberList
	} from "@/api/index";
	export default {
		data() {
			return {
				unitList1: [{
					name: '12309中国检察网',
					url: 'https://www.12309.gov.cn/'
				}, {
					name: '中国检察听证网',
					url: 'https://jctz.12309.gov.cn/'
				}, {
					name: '法律法规数据库',
					url: 'https://flk.npc.gov.cn/'
				}, {
					name: '人民检察院公报',
					url: 'https://www.spp.gov.cn/gjgb/'
				}],
				unitList2: [{
					name: '案件信息查询',
					url: 'https://www.12309.gov.cn/12309/gj/hen/sqs/index.shtml?channelLevels=/fb5a41c9247547bca03ae21326c3ad51/e2d8081e3a3640719cf2b3dedfb39725/edb7e3b634ed42769a0c99180e27d072/56a5a8a5a09e4c32baa39c6caa6e5225'
				}, {
					name: '法律文书',
					url: 'https://www.12309.gov.cn/12309/gj/hen/zjxflws/index.shtml?channelLevels=/fb5a41c9247547bca03ae21326c3ad51/e2d8081e3a3640719cf2b3dedfb39725/edb7e3b634ed42769a0c99180e27d072'
				}, {
					name: '重要案件信息',
					url: 'https://www.12309.gov.cn/12309/gj/hen/zzs/zdajxx/index.shtml?channelLevels=/fb5a41c9247547bca03ae21326c3ad51/e2d8081e3a3640719cf2b3dedfb39725/edb7e3b634ed42769a0c99180e27d072/2b383770eeea4d1ea3aaae9e4c3a31d3'
				}, {
					name: '检察建议',
					url: 'https://www.spp.gov.cn/spp/zdgz/201902/t20190226_409297.shtml'
				}],
				unitList3: [{
					name: '控告申诉举报',
					url: 'https://www.12309.gov.cn/12309/index.shtml'
				}, {
					name: '网上信访',
					url: 'https://www.12309.gov.cn/12309/wsxf/index.shtml'
				}, {
					name: '律师服务',
					url: 'https://www.12309.gov.cn/front-cas/login?service=https://www.12309.gov.cn/sppWeb/j_spring_cas_security_check'
				}, {
					name: '在线阅卷',
					url: 'http://yc.hbjc.gov.cn/wsjcfwdt_74065/wyb_74068/202204/P020220411364020950946.pdf'
				}, {
					name: '申请公开听证',
					url: 'https://www.spp.gov.cn/spp/xwfbh/wsfbh/202010/t20201020_482537.shtml'
				}],
				showBanner: false,
				scrollTop: 0, //默认距离顶部的距离
				isShow: false, //控制返回顶部按钮的显隐
				scrollTrigger: false, //默认初始值
				swiper: null,
				dataList1: [],
				dataList2: [],
				dataList3: [],
				dataList4: [],
				dataList5: [],
				dataList6: [],
				dataList7: [],
				dataList8: [],
				dataList9: [],
				oneData: {
					title: ''
				}
			}
		},
		mounted() {
			window.scrollTo(0, 0);
			this.init()
			this.getSwiper()
			window.addEventListener('scroll', this.windowScroll)
		},
		methods: {
			init() {
				//检察要闻
				getNewsList({
					tenantId: process.env.VUE_APP_TENANTID,
					pageSize: 10,
					pageNum: 1
				}).then(res => {
					this.dataList1 = res.rows
					if (this.dataList1 && this.dataList1.length > 0) {
						this.oneData = this.dataList1[0]
					}
				})
				getCarousel(process.env.VUE_APP_TENANTID).then(res => {
					this.dataList8 = res.data
				})
				//检察业务
				getFrontList({
					tenantId: process.env.VUE_APP_TENANTID,
					pageSize: 10,
					pageNum: 1
				}, {
					typeAncestors: '1817842224282300416'
				}).then(res => {
					this.dataList2 = res.rows
				})
				//理论研究
				getFrontList({
					tenantId: process.env.VUE_APP_TENANTID,
					pageSize: 10,
					pageNum: 1
				}, {
					typeAncestors: '1817842526263799808'
				}).then(res => {
					this.dataList3 = res.rows
				})
				//基层建设
				getFrontList({
					tenantId: process.env.VUE_APP_TENANTID,
					pageSize: 10,
					pageNum: 1
				}, {
					typeAncestors: '1817842639132520448'
				}).then(res => {
					this.dataList4 = res.rows
				})
				//检察文化
				getFrontList({
					tenantId: process.env.VUE_APP_TENANTID,
					pageSize: 10,
					pageNum: 1
				}, {
					typeAncestors: '1817842684183539712'
				}).then(res => {
					this.dataList5 = res.rows
				})
				//院领导
				getMemberList({
					tenantId: process.env.VUE_APP_TENANTID,
					pageSize: 6,
					pageNum: 1
				}, {
					type: '1817834651952963584'
				}).then(res => {
					this.dataList6 = res.rows
				})
				//摄影
				getFrontList({
					tenantId: process.env.VUE_APP_TENANTID,
					pageSize: 6,
					pageNum: 1
				}, {
					typeAncestors: '1817842779088056320'
				}).then(res => {
					this.dataList7 = res.rows
				})
				//专栏
				getFrontList({
					tenantId: process.env.VUE_APP_TENANTID,
					pageSize: 3,
					pageNum: 1
				}, {
					typeAncestors: '1817842954393186304'
				}).then(res => {
					this.dataList9 = res.rows
					this.showBanner = false
					this.dataList9.map(item => {
						if (item.coverImageUrl) {
							this.showBanner = true
						}
					})
				})
			},
			getSwiper() {
				this.swiper = new Swiper(".swiper-container", {
					loop: true, // 无缝
					autoplay: { //自动开始
						delay: 3000, //时间间隔
						disableOnInteraction: false, //*手动操作轮播图后不会暂停*
					},
					paginationClickable: true,
					slidesPerView: 4, // 一组三个
					spaceBetween: 30, // 间隔
					// 如果需要前进后退按钮
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
					// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
					observer: true,
					observeParents: true,
					// 如果需要分页器
					pagination: {
						el: '.swiper-pagination',
						clickable: true, // 分页器可以点击
					},
				})
			},
			toLink(url) {
				window.open(url, '_blank');
			},
			//数据的baseId, 一级菜单名称, 二级菜单名称, 一级菜单路径, 一级菜单baseId, type
			toDetail(id, routeName, twoName, routePath, routeId, type) {
				this.$router.push({
					name: 'commonDetail',
					query: {
						id: id,
						name: routeName,
						twoName: twoName,
						routePath: routePath,
						routeId: routeId,
						type: type
					}
				})
			},
			// 返回顶部事件
			goBack() {
				window.scrollTo({
					top: 0,
					left: 0,
					behavior: 'smooth' //平滑滚动  auto 立即跳转
				});
			},
			// 监听滚动条
			windowScroll() {
				let that = this; // 防止this指向问题
				// 设备一屏的高度
				let clientHeight =
					document.documentElement.clientHeight || document.body.clientHeight;
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				this.scrollTop = scrollTop;
				// 判断距离顶部多少显示回到顶部图标
				if (scrollTop > clientHeight) {
					that.isShow = true;
				} else {
					that.isShow = false;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.posi-area {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		-webkit-line-clamp: 5;
		word-break: break-all;
	}
	.news-area {
		width: 100%;
		background-color: #3F69BD;

		.one-new {
			padding: 30px 0;
			border-bottom: 1px solid #8DA9CB;

			.one-title {
				line-height: 60px;
				text-align: center;
				font-size: 32px;
				color: #FAFFFF;
				font-weight: bold;
				margin-bottom: 20px;
				cursor: pointer;
			}

			.one-title:hover {
				color: #BFD9F9;
			}

			.one-desc {
				color: #8DA9CB;
				text-indent: 2em;
				font-size: 18px;
			}

			.one-more {
				flex-shrink: 0;
				margin-left: 40px;
				color: #fff;
				font-size: 18px;
				cursor: pointer;
			}

			.one-more:hover {
				color: #BFD9F9;
			}
		}

		.news-title {
			.news-name {
				font-size: 28px;
				color: #fff;
			}

			.news-more {
				font-size: 14px;
				color: #fff;
				margin-top: 18px;
				cursor: pointer;
			}

			.news-more:hover {
				color: #BFD9F9;
			}
		}

		.news-item {
			margin-top: 20px;

			.item-dot {
				width: 5px;
				height: 5px;
				background-color: #fff;
				border-radius: 50%;
				margin-right: 6px;
				flex-shrink: 0;
			}

			.item-name {
				font-size: 16px;
				color: #fff;
				cursor: pointer;
			}

			.item-name:hover {
				color: #BFD9F9;
			}

			.item-date {
				font-size: 14px;
				margin-left: 30px;
				color: #9ba6c5;
				flex-shrink: 0;
			}
		}
	}

	.service-hall {
		background: url(~@/assets/image/index_12.jpg) no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 580px;
		padding-top: 100px;

		.hall-item {
			width: 22%;
			padding: 80px 20px 20px 20px;
			font-size: 18px;
			background: rgba(254, 254, 255, 0.7);
			border: 1px solid #fff;
			box-shadow: 0 3px 11px 2px rgba(0, 0, 0, 0.5);
			position: relative;
			height: 300px;
			margin: 0 12px;
			text-align: center;

			.wy-img {
				position: absolute;
				top: -70px;
				left: 50%;
				transform: translateX(-50%);
				width: 138px;
				height: 138px
			}

			.wy-item {
				color: #333;
				font-size: 18px;
				margin-bottom: 10px;
				cursor: pointer;
			}

			.wy-item:hover {
				color: #174D8F;
				font-weight: bold;
			}
		}
	}

	.grid-area {
		margin-top: 20px;

		.grid-title {
			width: 100px;
			height: 100px;
			background-color: #174D8F;
			border-radius: 8px;
			color: #fff;
			font-size: 18px;
			font-weight: bold;
			flex-shrink: 0;
			line-height: 32px;
			margin-bottom: 5px;
		}

		.grid-img {
			width: 94%;
			height: 100px;
			border-radius: 8px;
			margin-left: 6%;
		}
	}

	.com-title {
		height: 80px;
		line-height: 80px;
		border-bottom: 1px solid #ccc;
		position: relative;

		.bot-line {
			position: absolute;
			left: 0;
			bottom: -1px;
			background-color: #174D8F;
			width: 100px;
			height: 2px;
		}

		.com-name {
			color: #174D8F;
			font-size: 24px;
			font-weight: bold;
		}

		.com-more {
			color: #878787;
			font-size: 16px;
			cursor: pointer;
		}

		.com-more:hover {
			color: #0069FF;
		}
	}

	.com-item {
		margin-top: 20px;

		.item-dot {
			width: 5px;
			height: 5px;
			background-color: #B8B7B8;
			border-radius: 50%;
			margin-right: 10px;
			flex-shrink: 0;
		}

		.item-name {
			font-size: 16px;
			color: #333;
			cursor: pointer;
		}

		.item-name:hover {
			color: #0069FF;
		}

		.item-date {
			font-size: 14px;
			margin-left: 50px;
			color: #B8B7B8;
			flex-shrink: 0;
		}
	}

	.swiper-slide {
		position: relative;
		height: 228px;
		width: 264px;

		.swiper-img {
			height: 228px;
			width: 100%;
			object-fit: cover;
		}

		.el-button {
			z-index: 2;
		}
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 150px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.img-top {
		width: 100%;
		height: 54px;
		line-height: 54px;
		position: absolute;
		bottom: 0;
		background-color: rgba(101, 135, 203, 0.3);
		text-indent: 10px;
		font-size: 18px;
		color: #fff;
	}

	.fixed-right {
		position: fixed;
		top: 40%;
		right: 5px;
		z-index: 99999;

		.item-fixed {
			margin-bottom: 15px;
			width: 74px;
			height: 74px;
			background: url(~@/assets/image/gdbj.png) no-repeat;
			cursor: pointer;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			pointer-events: none;

			.item-name {
				font-size: 14px;
				color: 333;
				line-height: 30px;
			}

			.pop-box {
				position: absolute;
				top: -24px;
				left: -130px;
				opacity: 0;
				transition: all 1s;
				display: flex;
				justify-content: center;
				align-items: center;

				.wx-bg {
					width: 120px;
					height: 120px;
				}

				.triangle-right {
					width: 0;
					height: 0;
					border-top: 8px solid transparent;
					border-left: 10px solid #fff;
					border-bottom: 8px solid transparent;
				}
			}
		}

		.hover-box {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.hover-box:hover~.pop-box {
			opacity: 1;
			transition: all 1s;
		}
	}
</style>
